<template>
  <div>
    <!--[if lt IE 8]>
          <div class="ie-content">
              <div class="ie-content-bj">
                  <div class="ie-list">
                      <a href="http://www.google.cn/intl/zh-CN/chrome/browser/"><img src="images/ie7/sj1.jpg" alt=""></a>
                      <a href="http://www.firefox.com.cn/"><img src="images/ie7/sj2.jpg" alt=""></a>
                      <a href="http://chrome.360.cn/"><img src="images/ie7/sj3.jpg" alt=""></a>   
                  </div>
              </div>
          </div>
        <![endif]-->
  
    <!-- header -->
    <app-header :username="username" @LoginOut="loginOut"></app-header>
  
    <!-- nav -->
    <div class="top-nav">
      <div class="container">
        <div class="top-nav-main clear">
          <div class="logo">
            <a href="首页.html">
              <div class="logo-img"></div>
            </a>
          </div>
          <ul class="nav clear">
            <router-link v-for="item in navs" :to="{ path: item.path }" tag="li" class="nav-item" active-class="cur">
              {{ item.name }}
            </router-link>
          </ul>
        </div>
      </div>
    </div>
  
    <!-- main -->
    <div class="app-content">
      <keep-alive>
        <router-view :key="key" @changeLogin="changeLogin"></router-view>
      </keep-alive>
    </div>
  
    <!-- footer -->
    <app-footer></app-footer>
  
  </div>
</template>

<script>
import '../assets/css/common.css' // get common.css

import appHeader from '../components/header' // get header
import appFooter from '../components/footer' // get footer.css

export default {
  data() {
    return {
      username: '',
      navs: [{
        name: '首页',
        path: '/Index'
      }, {
        name: '新闻中心',
        path: '/News'
      }, {
        name: '下载APP',
        path: '/DownLoad'
      }, {
        name: '关于我们',
        path: '/AboutUs'
      }, {
        name: '个人中心',
        path: '/PersonalCenter'
      }, {
        name: '帮助中心',
        path: '/Help'
      }]
    }
  },
  computed: {
    key() {
      return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
    }
  },
  methods: {
    changeLogin(username) {
      this.username = username;
      this.$router.push({ path: '/' });
    },
    loginOut(username) {
      this.username = '';
      this.$router.push({ path: '/Login' });
    }
  },
  components: {
    appHeader, appFooter
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

/*  header */
.top-bar {
  background: #f5f5f5;
}

.top-bar-main {
  font-size: 13px;
}

.top-bar-left {
  float: left;
  height: 40px;
  line-height: 40px;
}

.top-bar-left .phone {
  color: #fab379;
}

.top-bar-person {
  color: #34a8e0;
}

.top-bar-out {
  margin-left: 15px;
}

.top-bar-right {
  float: right;
  height: 40px;
  line-height: 40px;
}

.top-bar-right .top-item {
  float: left;
}

.line {
  margin: 0 10px;
  float: left;
}



.top-nav,
.top-nav .top-nav-main {
  background: #363333;
}

.top-nav .logo {
  float: left;
  height: 76px;
}

.top-nav .logo-img,
.top-nav .text {
  display: inline-block;
}

.top-nav .logo-img {
  width: 198px;
  height: 76px;
  background: url(../assets/images/logo/logo.png) no-repeat 2px center;
}

.top-nav .nav {
  float: right;
}

.nav {
  height: 76px;
  line-height: 76px;
}

.nav .nav-item {
  float: left;
  padding-left: 40px;
  cursor: pointer;
}

.nav .nav-item.cur,
.nav .nav-item:hover {
  color: #fec900;
}

.nav .nav-item {
  font-size: 15px;
  color: #fff;
}
.login-content .login-bd, .register-content .register-bd {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #d2d2d2;
}
</style>
